<template>


 <div>


  <div :id="'mypdf' + item.id"  v-for="item in securities" :key="item.id" style="margin-bottom:50px;" border="true" size="mini">
  <el-descriptions :title="'[宿舍安全检查表](检查时间)：' + item.submitTime"  :column="2" border :extra="'浏览用户：' + user.username">
    <el-descriptions-item label="所属机构">北华航天工业学院</el-descriptions-item>
    <el-descriptions-item label="有无违章电器"> {{item.isElectricAppliance==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="有无蜡烛、酒精灯等明火设备"> {{item.isLight==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="有无有毒、有害、易燃、易爆等危险品"> {{item.isPoisonous==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="有无管制刀具、各类仿真枪具等危险器具"> {{item.isKnife==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="宿舍门窗是否悬挂或张贴遮盖物，床铺无帷幔"> {{item.isBed==1?'是':'否'}}</el-descriptions-item>
    <el-descriptions-item label="有无电竞椅、台式电脑及影响人员流通的大件家具"> {{item.isComputer==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="有无蜡烛、酒精灯等明火设备"> {{item.isLight==1?'有':'没有'}}</el-descriptions-item>
    <el-descriptions-item label="违规内容"> {{item.content}}</el-descriptions-item>
    <el-descriptions-item label="对应整改" label-class-name="my-label" content-class-name="my-content"> {{item.rectification==null?'该宿舍还未提交整改措施':item.rectification}}</el-descriptions-item>
        <el-descriptions-item label="违规图片">
         <el-image
      style="width: 100px; height: 100px"
      :src="item.photo"
      :fit="fit"></el-image>
    </el-descriptions-item>
    <el-descriptions-item label="你们还没有整改,请你代替你们宿舍填写整改方案" v-if="item.rectification==null">   
      <el-row :gutter="0">
        <!-- 输入框 -->
        <el-col :span="12">
            <el-input type="text" placeholder="请填写整改方案"  v-model="rectification.content"></el-input>
        </el-col>
        <!-- 搜索按钮 -->
        <el-col :span="6">
            <el-button @click="put(item.id)">提交</el-button>
        </el-col>
      </el-row>
    </el-descriptions-item>
    <el-descriptions-item label="已经填写整改方案，请认真整改" v-if="item.rectification!=null">   
        请认真整改，我们将会根据整改方案进行检查
    </el-descriptions-item>

  </el-descriptions>
  </div>

  <el-empty description="这个宿舍目前还没有安全检查"  v-if="securities.length === 0"></el-empty>



 </div>


</template>
<script>
import htmlToPdf from '@/script/htmlToPdf'
export default {

  data () {
    return {
      securities: [],
      rectification: {
        content: '',
        dormitoryId: '',
        securityQuestionId: ''
      },
      user: {},
      role: '',
    }
  },
  created () {

    // 获得角色信息
    this.role = window.sessionStorage.getItem('role')

    // 获得用户信息
    this.user = JSON.parse(window.sessionStorage.getItem('user'))

    // 设置整改的宿舍id
    this.rectification.dormitoryId = window.sessionStorage.getItem('d_id')


    // 查看宿舍安全问题
    this.$http.get('/dormitory/seurity/' + window.sessionStorage.getItem('d_id')).then(response => {
        this.securities = response.data
    })



},
  methods: {

    // 导出Pdf
    exportPdf(id,time) {
       htmlToPdf.downloadPDF(document.querySelector("#mypdf" + id), "宿舍安全情况-" + time);
    },

    put(id) {
       this.rectification.securityQuestionId = id
       this.$http.post('/rectification', this.rectification).then(response => {
         this.$message({
           type: 'success',
           message: '整改提交成功!'
         })
        // 查看宿舍安全问题
        this.$http.get('/dormitory/seurity/' + window.sessionStorage.getItem('d_id')).then(response => {
            this.securities = response.data
        })         
       })
    }
  }
}
</script>
<style>

  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }

</style>